<template>
  <div class="banxin tanxin gedan">
    <div class="gedan_1">
      <div class="gedan_1_left tanxin">
        <h3>
          <span>全部</span>
          <button>选择分类</button>
        </h3>
        <div class="gedan_1_right">
          <button>热门</button>
        </div>
      </div>
      <div class="gedan_2 tanxin">
        <ul>
          <li v-for="item, id in PlaylistData" :key="id">
            <img :src="item.coverImgUrl" alt />
            <p>
              <a href>{{ item.name }}</a>
            </p>
            <p>
              <span style="font-size: 12px;   color: #ccc;">by</span>
              <a href style="font-size: 12px; color: #666; padding: 0 10px; ">Llstener</a>
              <img
                src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/…03/b735/7c7a/0dddcdf78047d397d24125840e54ab5b.png"
                alt
                style="width: 13px; height: 13px;"
              />
            </p>
          </li>
        </ul>
      </div>
      <div class="gedan_wei">
        <div class="gedan_wei_1">
          <a href class="ye" style>上一页</a>
          <a href class="shu" style="background-color: #ae090a; border: 1px solid #ae090a;">1</a>
          <a href class="shu">2</a>
          <a href class="shu">3</a>
          <a href class="shu">4</a>
          <a href class="shu">5</a>
          <a href class="shu">6</a>
          <a href class="shu">7</a>
          <a href class="shu">8</a>
          <span>...</span>
          <a href class="shu">19</a>
          <a href class="ye">下一页</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Playlist } from "@/request/api";
export default {
  data() {
    return {
      PlaylistData: [],
      id: []
    };
  },
  created() {
    Playlist().then(res => {
      console.log(res);
      this.PlaylistData = res.data.playlists;
    });
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.gedan {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .gedan_1 {
    padding: 40px;
    position: relative;
    zoom: 1;

    .gedan_wei {
      text-align: center;
      margin: 20px 0;

      .ye {
        background: url(../assets/image/button.png) no-repeat 0 9999px;
        background-position: 0 -620px;
        color: #cacaca;
        cursor: default;
        width: 70px;
        font-size: 12px;
        line-height: 25px;
        height: 25px;
        display: inline-block;
        padding-left: 5px;
      }

      .shu {
        background-position: 0 -650px;
        background: url(../assets/image/button.png) no-repeat 0 9999px;
        color: #cacaca;
        cursor: default;
        height: 22px;
        padding: 0 8px;
        background-color: #fff;
        line-height: 22px;
        margin: 0 1px 0 2px;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 2px;
        vertical-align: middle;
        font-size: 12px;
        color: #000;
        text-decoration: none;
      }
    }
  }
}

.gedan_1_left {
  width: 900px;
  height: 42px;
  height: 40px;
  border-bottom: 2px solid #c20c0c;

  h3 {
    float: left;
    font-size: 24px;
    font-weight: normal;

    button {
      width: 91px;
      height: 31px;
      font-size: 12px;
      margin-left: 10px;
      color: #0c73c2 !important;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
  }

  .gedan_1_right {
    height: 29px;
    background-position: 0 0;
    border-radius: 3px;

    button {
      float: left;
      width: 46px;
      height: 29px;
      line-height: 29px;
      text-align: center;
      background-color: #ae090a;
      border-radius: 5px;
      border: 1px solid #ae090a;
      color: #fff;
      font-size: 12px;
    }
  }
}

.gedan_2 {
  width: 980px;
  height: 1743px;

  ul {
    float: left;
    width: 950px;
    height: 100%;
    margin: 0 -25px;

    li {
      display: inline-block;
      width: 140px;
      height: 188px;
      overflow: hidden;
      padding: 25px 25px;
      line-height: 1.4;

      p {
        margin: 8px 0 3px;
        font-size: 14px;

        a {
          display: inline-block;
          max-width: 100%;
          _width: 100%;
          vertical-align: middle;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          color: #000;
          text-decoration: none;
        }
      }
    }

    img {
      width: 140px;
      height: 140px;
    }
  }
}
</style>